<template>
	<view class='content'>
		<!-- 图片合成书册页 -->
		<canvas class="canvas-target-backCover" id="canvas-target-backCover" ref="canvasRefBook" :style="{
		        width: img_width + 'px',
		        height: img_height + 'px',
		        right: -(img_width + SCREEN_WIDTH) + 'px',
		    }" canvas-id="canvas-target-backCover"></canvas>
	</view>
</template>

<script>
	const sysInfo = uni.getSystemInfoSync();
	const isIphoneX =
		sysInfo.model.search("iPhone X") !== -1 ||
		sysInfo.model.search("iPhone 11") !== -1;
	const paddingBottom = isIphoneX ? 30 : 0;
	const bottomNavHeight = 160;
	const toolbarHeight = 40;
	const SCREEN_WIDTH = sysInfo.windowWidth;
	const SCREEN_HEIGHT = sysInfo.windowHeight - bottomNavHeight - toolbarHeight - paddingBottom - 20;
	export default {
		props: {
			img_url: {
				type: String,
				default: null
			},
			backCoverSrc:{
				type:String,
				default:null
			}
		},
		watch:{
			img_url:{
				handler: async function(url) {
					this.data_img_url = url
				},
				immediate: true,
			},
			backCoverSrc:{
				handler: async function(url) {
					this.data_backCoverSrc = url
				},
				immediate: true,
			},
		},
		data() {
			return {
				SCREEN_WIDTH, // 图片容器宽度,
				SCREEN_HEIGHT,
				img_width: 794,
				img_height: 1123,
				ctx:null,
				bookArr:[],
				data_img_url:this.img_url,
				data_backCoverSrc:this.backCoverSrc
			};
		},
		mounted() {
			
		},
		methods: {
			save(callback) {
				let that = this;
				let img_url = this.data_img_url;
				let qr_width = 160
				let qr_height = 160
				let qrcodeUrl = this.data_backCoverSrc;
				this.ctx = uni.createCanvasContext('canvas-target-backCover', this);
				this.ctx.rect(0, 0, this.img_width, this.img_height)
				this.ctx.setFillStyle('white')
				this.ctx.fill()
				Promise.all([that.imgOnload(img_url),that.imgOnload(qrcodeUrl)]).then(res=>{
					that.ctx.drawImage(
						img_url,
						0,
						0,
						this.img_width,
						this.img_height,
					)
					that.ctx.drawImage(
						qrcodeUrl,
						this.img_width/2-qr_width/2,
						this.img_height/2+qr_height/3*2,
						qr_width,
						qr_height,
					)
					that.ctx.draw(false, function() {
						uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: that.img_width,
								height: that.img_height,
								canvasId: "canvas-target-backCover",
								success: function(res) {
									uni.uploadFile({
										header: {
											Authorized: uni.getStorageSync('token')
										},
										url: that.$url.url + "upload_img",
										filePath: res.tempFilePath,
										name: "file",
										success: (uploadFileRes) => {
											let resu = JSON.parse(
												uploadFileRes.data
											);
											callback && callback(resu.data.url)
										},
										fail(err) {
											console.log(err,"err uploadFile");
										},
									});
								},
								fail(e) {
									console.error("canvasToTempFilePath",e);
								},
							},
							that
						);
					});
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
